<template>
  <div class="allorder">
    <div class="order-tt">
      <span class="li" v-on:click="gotoAddress('/me/allorder')">全部</span>
      <span class="li "  v-on:click="gotoAddress('/me/awaitorder')">待付款</span>
      <span class="li" v-on:click="gotoAddress('/me/fahuoorder')">待发货</span>
      <span class="li active" v-on:click="gotoAddress('/me/shouhuoorder')">待收货</span>
      <span class="li " v-on:click="gotoAddress('/me/pingjiaorder')">已完成</span>
    </div>

    <div class="no" v-if="!have">您还没有相关的订单(暂无待收货)</div>

    <div class="list" v-else v-for="item in orderList">
      <div class="list-tt clearfix">
        <div class="left">订单编号：{{item.order_id}}</div>
        <div class="right">{{item.status}}</div>
      </div>

      <div class="product clearfix" v-for="it in item.products" @click="gotoAddress({path:'/shop/details/'+it.product_id})">
        <div class="fl">
          <div class="img"><img :src="it.image" alt=""></div>
        </div>
        <div class="fc">
          <div class="title">{{it.name}}</div>
          <div class="price">{{it.price}}</div>
        </div>
      </div>

      <div class="paymoney"><span class="money">已支付：{{item.total}}</span></div>
      <div class="edit-box">
        <span class="seewuliu" @click="gotoAddress('/me/seeorder?id='+item.order_id)" >查看物流</span>
        <span class="sureshouhuo" @click="shouhuo(item.order_id)">确认收货</span>
      </div>
    </div>

    <!--<div class="list">-->
      <!--<div class="list-tt clearfix">-->
        <!--<div class="left">订单编号：123213123</div>-->
        <!--<div class="right">代付款</div>-->
      <!--</div>-->
      <!--<div class="product clearfix">-->
        <!--<div class="fl">-->
          <!--<div class="img"><img src="https://dummyimage.com/40x40" alt=""></div>-->
        <!--</div>-->
        <!--<div class="fc">-->
          <!--<div class="title">dsfdsflsjdfdsfdsflsjdfdsfdsflsjdfdsfdsflsjdfs</div>-->
          <!--<div class="price">6000</div>-->
        <!--</div>-->
      <!--</div>-->
      <!--<div class="paymoney"><span class="money">需付款：6000</span></div>-->
      <!--<div class="edit-box">-->
        <!--<span class="seewuliu">查看物流</span>-->
        <!--<span class="sureshouhuo">确认收货</span>-->
      <!--</div>-->
    <!--</div>-->


  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  export default {
    name: 'Order',
    data () {
      return {
        orderList:[],
        have:false
      }
    },
    mounted:function(){

      this.initData()

    },

    methods:{
      gotoAddress(path){
        this.$router.push(path)
      },

      initData:function(){

        var _this = this;
        var ajaxData = {};
        ajaxData.pn = 1;
        ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token || '';
        setTimeout(function(){
          $.ajax({
            type:'post',
            url: RouteMap.receivedorder,
            data:ajaxData,
            success:function(res){
              if(res.code == 200){

                if(res.data.length==0){
                  _this.have = false;
                  return;
                }
                _this.orderList = res.data.list;
                if(_this.orderList.length>0){
                  _this.have = true;
                }

              }
              else{
                //Toast(res.msg)
              }
            }
          })
        })
      },

      //收货
      shouhuo:function(id){
        var _this = this;
        var ajaxData = {};
        ajaxData.order_id = id;
        ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token || '';
        $.ajax({
          type:'post',
          url:RouteMap.shouhuoOrder,
          data:ajaxData,
          success:function(res){
            if(res.code ==200){
              //Toast(res.msg);
              _this.initData();
            }
            else{
              //Toast(res.msg);
            }
          }
        })
      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .allorder{}
  .order-tt{
    font-size: 0;
    border-bottom: 1px solid #f2f2f2;
    color: #6f6f6f;
  }
  .order-tt .li{
    font-size: 0.6rem;
    display: inline-block;
    width: 20%;
    text-align: center;
    padding: 0.5rem 0;
  }
  .order-tt .li.active{
    border-bottom: 1px solid #b81d23;
    position: relative;
    bottom:-1px;
    color: #b61f21;

  }
  .list{
    padding: 0 0.5rem;
    color: #717171;
    font-size: 0.5rem;
  }
  .list-tt{
    padding: 0.5rem 0;
  }
  .list-tt .right{ float: right}
  .product{
    background: #f3f3f3;
    padding: 0.5rem;
  }
  .product .fl{
    width: 3rem;
  }
  .product .fl img{
    width: 3rem;
  }
  .product .fc{
    width: 10rem;
    word-break: break-all;
    word-wrap: break-word;
    margin-left: 0.5rem;
  }
  .paymoney{
    text-align: right;
    padding: 0.5rem;
    border-bottom: 1px solid #f2f2f2;
  }
  .edit-box{
    text-align: right;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f2f2f2;
  }
  .edit-box span{
    display: inline-block;
    padding: 0.2rem 1rem;
    border-radius: 3rem;
    border: 1px solid #ff7b80;
    color: #ff7b80;
  }
  .edit-box .pay{
    background:#ff7b80;
    color: #fff;

  }
  .no{
    text-align: center;
    padding: 2rem 0;
    color: #ccc;
    margin-top: 5rem;

  }
</style>
